<template>
  <div class="cart-footer border-top-1px">
    <div class="all-checked">
      <cube-checkbox
        :option="{label:''}"
        class="checkbox"
        v-model="total.allSelected"
        @input="changeAllSelected"
      ></cube-checkbox>
    </div>
    <div class="num">
      已选({{ total.totalQuantity }})
    </div>
    <div class="calc">
      <div class="price">
        <span v-if="!edit && total.totalPrice > 0">￥{{ total.totalPrice }}</span>
      </div>
<!--      <div class="button" @click="toOrder" v-if="!edit && total.totalPrice > 0">去结算</div>-->
      <div class="button" @click="toOrder" v-if="!edit">去结算</div>
      <div class="button delete" @click="deleteCart" v-if="edit">删除</div>
      <div class="button clear" @click="clearCart" v-if="edit">清空</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CartFooter',
  props: {
    total: {
      type: Object,
      default() {
        return {
          allSelected: false,
          totalQuantity: 0,
          totalPrice: 0
        }
      }
    },
    edit: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // to order
    toOrder() {
      this.$emit('toOrder')
    },
    // change all selected
    changeAllSelected(v) {
      this.$emit('changeAllSelected', v)
    },
    // delete
    deleteCart() {
      this.$createDialog({
        type: 'confirm',
        content: '您确定要删除选中的这些吗',
        onConfirm: () => {
          this.$emit('delete')
        }
      }).show()
    },
    // clear
    clearCart() {
      this.$createDialog({
        type: 'confirm',
        content: '您确定要清空购物车吗',
        onConfirm: () => {
          this.$emit('clear')
        }
      }).show()
    }
  }
}
</script>

<style scoped lang="stylus">
.cart-footer
  height 40px
  line-height 40px
  background white
  position fixed
  z-index 10
  bottom 50px
  left 0
  width 100%
  display flex
  .all-checked
    width 45px
    .checkbox
      font-size 20px
  //background red
  .num
    width 100px
    text-align left
  //background red
  .calc
    flex 1
    //background black
    display flex
    .button
      width 70px
      font-size 14px
      background $main_color
      color white
      &.delete
        color white
        background red
      &.clear
        color white
        background black
    .price
      flex 1
      text-align right
      padding-right 10px
      color red
      font-size 16px
      font-weight 700
</style>
